<template>
  <dialog ref="dialog" :class="{ shake: disabled }">
    <header>
      <h2>{{ tit }}</h2>
    </header>
    <main>
      {{ content }}
    </main>
    <footer>
      点击按钮确认
      <button type="button" @click="closeMe">
        <svg height="24" width="24" fill="#FFFFFF" viewBox="0 0 24 24" id="sparkle">
          <path
              d="M10,21.2,6.7,14.7.2,11.5,6.7,8.2,10,1.7l3.2,6.4L19.7,11.5l-6.4,3.2ZM18,21l1.5,3L21,21l3-1.5L21,18l-1.5-3L18,18l-3,1.5ZM19.3,4.6,20.5,7l1.1-2.3L24,3.5,21.6,2.3,20.5,0,19.3,2.3,17,3.5Z"></path>
        </svg>
        <span id="text">确认</span>
      </button>
    </footer>
  </dialog>
</template>

<script lang="ts" setup>
import {ref} from "vue";

defineProps<{
  tit: string
  content: string
}>()
const dialog = ref<HTMLDialogElement>()
const disabled = ref(false)
const showMe = () => {
  dialog.value?.showModal()
  disabled.value = true
  setTimeout(() => {
    disabled.value = false
  }, 1500)
}
const closeMe = () => dialog.value?.close()
defineExpose({showMe})
</script>

<style lang="scss" scoped>
dialog {
  border-radius: 24px;
  border: 4px solid #ff9ec6;
  box-shadow: 0 0 40px 0 rgba(255, 158, 198, 0.6);
  font-size: 16px;
  line-height: 1.8;
  background-color: #fff5f9;
  max-width: 90%;
  max-height: 80%;
  -webkit-user-select: none;
  user-select: none;
  color: #d14d82;

  header {
    text-align: center;
    h2 {
      margin: 0;
      padding: 16px 0;
      color: #e84393;
      text-shadow: 0 2px 4px rgba(232, 67, 147, 0.2);
    }
  }

  main {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0 24px;
    margin-bottom: 16px;
  }

  footer {
    display: flex;
    justify-content: right;
    padding: 16px 24px;
    background: linear-gradient(to right, transparent, #ffe6f0 50%, transparent);
    border-radius: 0 0 20px 20px;
    color: #e84393;

    button {
      $back-col: #ff6b9e;
      $txt-act-col: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 120px;
      height: 44px;
      border: none;
      border-radius: 24px;
      background: $back-col;
      cursor: pointer;
      transition: all 350ms ease-in-out;
      box-shadow: 0 4px 12px rgba(255, 107, 158, 0.3);

      #sparkle {
        fill: #fff;
        transition: all 600ms ease;
      }

      #text {
        font-weight: 600;
        color: white;
        font-size: medium;
        letter-spacing: 1px;
      }

      &:hover {
        background: linear-gradient(0deg, #ff9ec6, #ff6b9e);
        box-shadow: 0 6px 16px rgba(255, 107, 158, 0.4),
                    inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);

        #text {
          color: $txt-act-col;
          text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        }

        #sparkle {
          fill: $txt-act-col;
          transform: scale(1.2) rotate(15deg);
        }
      }
    }
  }
}

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }
}
</style>
